<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="interfaceName" placeholder="请输入接口名称查询" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="apiname" placeholder="请输入测试环境名称查询" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="requestPath" placeholder="请输入请求路径查询" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="parameterTypeQuery" placeholder="参数类型" clearable style="width: 90px" class="filter-item">
        <el-option v-for="item in parameterType" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="requsetMethodQuery" placeholder="请求方式" clearable style="width: 90px" class="filter-item">
        <el-option v-for="item in requsetMethod" :key="item" :label="item" :value="item" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="findAll(size,current)">搜索</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="clearfind">重置</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-delete" @click="deletelist">删除</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-download" @click="resultexport">导出</el-button>
      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
        端口
      </el-checkbox>
    </div>
    <div id="body">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="records"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
        ref="multipleTable"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column fixed prop="interfaceId" label="ID" width="50" align="center" :show-overflow-tooltip='true'>
        </el-table-column>
        <el-table-column prop="interfaceName" label="接口名称" width="100" align="center" :show-overflow-tooltip='true'>
        </el-table-column>
        <el-table-column prop="ip" label="IP地址" min-width="120" align="center" :show-overflow-tooltip='true' >
          <template slot-scope="{row}">
             <span class="link-type" @click="update(row.interfaceId)">{{ row.ip }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="agreement" label="协议" width="50" align="center">
        </el-table-column>
        <el-table-column v-if="showReviewer" prop="port" label="端口" width="60" align="center">
        </el-table-column>
        <el-table-column prop="requestPath" label="请求路径" min-width="100" :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column prop="parameterType" label="参数类型" width="100" align="center">
        </el-table-column>
        <el-table-column prop="requsetMethod" label="请求方式" width="100" align="center">
        </el-table-column>
        <el-table-column prop="apiname" label="测试环境" width="110" align="center">
        </el-table-column>
        <el-table-column prop="remark" label="接口说明" :show-overflow-tooltip='true' min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="100" :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column prop="createName" label="创建人" width="100" :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column prop="lastupdateTime" label="修改时间" width="100" :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column prop="lastupdateName" label="修改人" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button @click="update(scope.row.interfaceId)" type="primary" size="mini">编辑</el-button>
            <el-button @click="deleteOne(scope.row.interfaceId)" type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
          :page-sizes="pagesizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

  </div>
</template>

<script>
  import waves from '@/directive/waves'
  import { findAllList, parameterTypeGet,requsetMethodTypeGet,findtestEnvironmentSelectListGet,addInterfacePost,deleteInterfacePost,getDetail,updateInterface,exportInterface} from '@/api/automation/interface'
  export default{
    name:"Interface",
    directives: { waves },
    data(){
      return{
        tableKey:0,
        listLoading: true,
        user:{},
        records:[],
        total: 0,
        current: 1,
        size: 10,
        pagesizes: [10, 20, 50, 100],
        interfaceName:"",
        parameterTypeQuery:"",
        requsetMethodQuery:"",
        apiname:"",
        requestPath:"",
        dialogFormVisible:false,
        testingEnvironmentUpdateFrom:false,
        InterfaceAddFrom:{},
        parameterType:[],
        requsetMethod:[],
        testEnvironmentSelectList:[],
        formLabelWidth:'120px',
        InterfaceUpdateFrom:{},
        UrlParameterTransferList:[
          {
            "datasourceId":1,
            "apiname":"不传",
            "urlValue":0
          },
          {
            "datasourceId":1,
            "apiname":"传",
            "urlValue":1
          }
        ],
        showReviewer:false
      }
    },
    methods: {
      getUser(){
        var json = localStorage.getItem("user");
        this.user = JSON.parse(json);
      },
      //列表页
      findAll(size,current){
        this.listLoading = true
        findAllList({
          current: current,
          size: size,
          interfaceName:this.interfaceName,
          parameterType:this.parameterTypeQuery,
          requsetMethod:this.requsetMethodQuery,
          apiname:this.apiname,
          requestPath:this.requestPath
        }).then(resp=>{
              this.total=resp.data.total;
              this.current = resp.data.current;
              this.size = resp.data.size;
              this.records=resp.data.records;
              setTimeout(() => {
                this.listLoading = false
              }, 1.5 * 1000)
        })
      },
      //清空查询条件
      clearfind() {
        this.interfaceName="";
        this.parameterTypeQuery="";
        this.requsetMethodQuery="";
        this.apiname="";
        this.requestPath="";
        this.findAll(this.size, this.current);
      },
      //获取参数类型
      findAllparameterType(){
        parameterTypeGet().then(resp=>{
            this.parameterType=resp.data;
        })
      },
      //请求方式
      findAllrequsetMethod(){
        requsetMethodTypeGet().then(resp=>{
            this.requsetMethod=resp.data;
        })
      },
      //获取测试环境
      findtestEnvironmentSelectList(){
        findtestEnvironmentSelectListGet().then(resp=>{
            this.testEnvironmentSelectList=resp.data;
        })
      },
      add(){
        this.$router.push({
          name:"InterfaceFrom",
          query:{isAdd:true}
        })
      },
      //通过选择框多选删除
      deletelist(){
          var ids=[];
          this.$refs.multipleTable.selection.forEach(item => {
            ids.push(item.interfaceId);
          });
          var InterfaceDeleteFrom={};
          InterfaceDeleteFrom.ids=ids;
          deleteInterfacePost(InterfaceDeleteFrom).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.findAll(this.size,this.current);
          })
      },
      deleteOne(interfaceId){
        var ids=[];
        ids.unshift(interfaceId);
        var InterfaceDeleteFrom={};
        InterfaceDeleteFrom.ids=ids;
        deleteInterfacePost(InterfaceDeleteFrom).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.findAll(this.size,this.current);
        })
      },
      //打开编辑页面
      update(interfaceId){
        this.$router.push({
          name:"InterfaceFrom",
          query:{isAdd:false,interfaceId:interfaceId}
        })
      },
      //条数变更
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.findAll(val, this.current)
      },
      //页码变更
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.findAll(this.size, val)
      },
      //导出
      resultexport(){
        this.$http.get("/interface/export",{responseType: 'blob'}).then(res=>{
         var timeString  = new Date().toLocaleString();
         const fileName = "接口数据"+"-"+timeString+".xls";
         //   res.data:请求到的二进制数据
         const blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); //1.创建一个blob
         const link = document.createElement("a"); //2.创建一个a链接
         link.download = fileName; //3.设置名称
         link.style.display = "none"; // 4.默认不显示
         link.href = URL.createObjectURL(blob); // 5.设置a链接href
         document.body.appendChild(link);//6.将a链接dom插入当前html中
         link.click();//7.点击事件
         URL.revokeObjectURL(link.href); //8.释放url对象
         document.body.removeChild(link); //9.移除a链接dom
        }
        );
      },
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      }
    },
    created(){
      // this.getUser();
      this.findAll(this.size,this.current);
      this.findAllparameterType();
      this.findAllrequsetMethod();
      this.findtestEnvironmentSelectList();
    }
  }

</script>

<style>
  .paginationClass {
      position: fixed;
      bottom: 0;
      height: 40px;
      width: 100%;
      text-align: center;
  }
</style>
